<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>图片上传</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" href="js/imagecropper/cropper.css" />
		<style>
			.mui-views,
			.mui-view,
			.mui-pages,
			.mui-page,
			.mui-page-content {
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				width: 100%;
				height: 100%;
				background-color: #efeff4;
			}
			
			.mui-pages {
				top: 46px;
				height: auto;
			}
			
			.mui-page.mui-transitioning {
				-webkit-transition: -webkit-transform 300ms ease;
				transition: transform 300ms ease;
			}
			
			.mui-page-left {
				-webkit-transform: translate3d(0, 0, 0);
				transform: translate3d(0, 0, 0);
			}
			
			.mui-page-left {
				-webkit-transform: translate3d(-20%, 0, 0);
				transform: translate3d(-20%, 0, 0);
			}
			
			.mui-navbar {
				position: fixed;
				right: 0;
				left: 0;
				z-index: 10;
				height: 44px;
				background-color: #f7f7f8;
			}
			
			.mui-navbar .mui-bar {
				position: absolute;
				background: #f7f7f8;;
				text-align: center;
			}
			
			.mui-navbar .mui-btn-nav {
				-webkit-transition: none;
				transition: none;
				-webkit-transition-duration: .0s;
				transition-duration: .0s;
			}
			
			.mui-navbar .mui-bar .mui-title {
				display: inline-block;
				width: auto;
			}
			
			.mui-navbar-inner.mui-transitioning,
			.mui-navbar-inner .mui-transitioning {
				-webkit-transition: opacity 300ms ease, -webkit-transform 300ms ease;
				transition: opacity 300ms ease, transform 300ms ease;
			}
			
			.mui-page {
				display: none;
			}
			
			.mui-pages .mui-page {
				display: block;
			}
		
			
			#startUpload {
				background: #e9380e;
				border: none;
				color: #fff;
				margin-top: 100px;
			}
			
			#uploadList a {
				color: #e9380e;
			}
			
			.piclist .pic {
				float: left;
			}
			
			.piclist {
				width: 100%;
			}
			
			#img {
				display: none;
			}
		</style>
	</head>

	<body class="mui-fullscreen">
		<!--页面主结构开始-->
		<div id="app" class="mui-views">
			<div class="mui-view">
				<div class="mui-navbar"></div>
				<div class="mui-pages"></div>
			</div>
		</div>
		<!--页面主结构结束-->
		<!--单页面开始-->
		<div id="setting" class="mui-page">
			<!--页面标题栏开始-->
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
					<span class="mui-icon mui-icon-left-nav"></span>
				</button>
				<h1 class="mui-center mui-title">图片上传</h1>
			</div>
			<!--页面标题栏结束-->
			<!--页面主内容区开始-->
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<div id="uploadList">
							<a class="pic" href="#picture" id="tu1" cut="cuting">
								<img src="../images/logo.png" />
							</a>
							<a class="pic" href="#picture" id="tu3">
								<img src="../images/logo.png" />
							</a>

							<div class="piclist">

								<a id="addbtn3" class="mui-icon mui-icon-plus" href="#picture"></a>

							</div>
							<div class="piclist">

								<a id="addbtn4" class="mui-icon mui-icon-plus" href="#picture"></a>

							</div>
						</div>
						<button id="startUpload" type="button" class="mui-btn mui-btn-block mui-disabled">保存修改</button>
						<button id="allpush" class="mui-btn mui-btn-block">全部信息提交到服务器</button>
						<ul class="mui-table-view mui-table-view-chevron">
							<li class="mui-table-view-cell">
								<a href="#account" class="mui-navigate-right">账号与安全</a>
							</li>
						</ul>
						<ul class="mui-table-view mui-table-view-chevron">
							<li class="mui-table-view-cell">
								<a href="#notifications" class="mui-navigate-right">新消息通知</a>
							</li>

						</ul>
						<ul class="mui-table-view mui-table-view-chevron">
							<li class="mui-table-view-cell">
								<a href="test.html" class="mui-navigate-right">全景看图</a>
							</li>
						</ul>
						<ul class="mui-table-view mui-table-view-chevron">
							<li class="mui-table-view-cell">
								<a href="http://192.168.20.154:8020/qiniuupload-0.9/mine/test.html" class="mui-navigate-right">1全景看图</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<!--页面主内容区结束-->
		</div>
		<!--单页面结束-->
		<div id="account" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
					<span class="mui-icon mui-icon-left-nav"></span>图片上传
				</button>
				<h1 class="mui-center mui-title">账号与安全</h1>
			</div>
			<div class="mui-page-content">
				
			</div>
		</div>
		<div id="notifications" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
					<span class="mui-icon mui-icon-left-nav"></span>图片上传
				</button>
				<h1 class="mui-center mui-title">新消息通知</h1>
			</div>
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<ul class="mui-table-view">
							<li class="mui-table-view-cell">
								<a>接收新消息通知<span class="mui-pull-right">已开启</span></a>
							</li>
						</ul>
						<ul class="mui-table-view">
							<li class="mui-table-view-cell">
								通知显示消息详情
								<div class="mui-switch mui-active mui-switch-mini">
									<div class="mui-switch-handle"></div>
								</div>
							</li>
						</ul>
						<div class="mui-content-padded">
							<p>若关闭，当收到新消息时，通知提示将不显示发信人和内容摘要</p>
						</div>

						<ul class="mui-table-view mui-table-view-chevron">
							<li class="mui-table-view-cell">
								<a href="#notifications_disturb" class="mui-navigate-right">功能消息免打扰</a>
							</li>
						</ul>
						<div class="mui-content-padded">
							<p>图片上传系统功能消息提示声音和震动的时段</p>
						</div>
						<ul class="mui-table-view">
							<li class="mui-table-view-cell">
								<a>接收新消息通知<span class="mui-pull-right">已开启</span></a>
							</li>
						</ul>
						<ul class="mui-table-view">
							<li class="mui-table-view-cell">
								声音
								<div class="mui-switch mui-active mui-switch-mini">
									<div class="mui-switch-handle"></div>
								</div>
							</li>
							<li class="mui-table-view-cell">
								震动
								<div class="mui-switch mui-active mui-switch-mini">
									<div class="mui-switch-handle"></div>
								</div>
							</li>
						</ul>
						<div class="mui-content-padded">
							<p>当HelloMUI在运行时，你可以图片上传是否需要声音或者震动</p>
						</div>
						<div></div>
					</div>
				</div>
			</div>
		</div>

	</body>
	<script src="../js/mui.min.js "></script>
	<script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>
	<script type="text/javascript" src="js/imagecropper/cropper.js"></script>
	<script src="js/qiniuupload-0.9.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/mui.view.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		qiniuupload({
			uploadListId: "uploadList", //待上传图片列表
			startUploadId: "startUpload", //开始上传按钮
			uploadMax: 1, //一个盒子内最多能添加的数量
			hideLoaded: false, //清除已上传
			uptokenUrl: 'http://10.8.45.1:8080/qiniuTest/getToken?bucket=test1', //获取服务器验证七牛uptoken的服务器地址
			picUrl: "http://ongwb2t5i.bkt.clouddn.com" //七牛账号的图片地址
		});

		$("#allpush").on("tap", function() {
			if(xhrNumber == 0) {
				var urlStr = "",
					$inputAll = $("input[name='picurl']"),
					$inputAllLength = $inputAll.length;
				$inputAll.each(function(n, item) {
					if(n == $inputAllLength - 1) {
						urlStr += item.value;
					} else {
						urlStr += item.value + ",";
					};
				});
				alert(urlStr);
				$.ajax({
					type: "post",
					url: "",
					async: true,
					data: urlStr,
					success: function(result) {

					}
				});
			} else {
				mui.toast("图片还没有传完")
			}
		});
		/*	sessionStorage.uptoken ="ZJe6XicoEEAA8idMiNlTjrE2VMZe2ssITzApMFGO";
			picUrl: "http://omjbzg6gs.bkt.clouddn.com" //七牛账号的图片地址*/
	</script>
	<script>
		mui.init();
		//初始化单页view
		var viewApi = mui('#app').view({
			defaultPage: '#setting'
		});
		//初始化单页的区域滚动
		mui('.mui-scroll-wrapper').scroll();
		viewchange();

		function viewchange() {
			var view = viewApi.view;
			//处理view的后退与webview后退
			var oldBack = mui.back;
			mui.back = function() {
				if(viewApi.canBack()) { //如果view可以后退，则执行view的后退
					viewApi.back();
				} else { //执行webview后退
					oldBack();
				}
			};
			//监听页面切换事件方案1,通过view元素监听所有页面切换事件，目前提供pageBeforeShow|pageShow|pageBeforeBack|pageBack四种事件(before事件为动画开始前触发)
			//第一个参数为事件名称，第二个参数为事件回调，其中e.detail.page为当前页面的html对象
			view.addEventListener('pageBeforeShow', function(e) {
				//								console.log(e.detail.page.id + ' beforeShow');
			});
			view.addEventListener('pageShow', function(e) {
				//								console.log(e.detail.page.id + ' show');
			});
			view.addEventListener('pageBeforeBack', function(e) {
				//								console.log(e.detail.page.id + ' beforeBack');
			});
			view.addEventListener('pageBack', function(e) {
				//								console.log(e.detail.page.id + ' back');
			});
		};
	</script>

</html>